<template>
  <el-dialog
    title="区段定义"
    :visible="visible"
    center
    :show-close="false"
    width="750px"
  >
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>区段定义</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="handleCancel"
        ></span>
      </div>
    </div>
    <!--    添加区段form start-->
    <el-form ref="form" :model="form" class="pl30 pr30" label-width="120px">
      <el-row :gutter="48">
        <el-col :span="12">
          <el-form-item
            label="区段名"
            prop="name"
            :rules="[
              { required: true,message: '区段名不能为空',trigger: 'blur'},
              {validator: validateName}]" >
            <el-input v-model.trim="form.name" :maxlength="64" show-word-limit></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="区段类型"
            prop="sectionType"
            :rules="[
              { required: true,message:'区段类型不能为空',trigger: 'blur'},
              {validator: validateSectionType, trigger: 'change'}]" >
            <el-select v-model="form.sectionType" @change="handleChangeType">
              <el-option value="Fixed">Fixed</el-option>
              <el-option v-if="ruleType==='DYNAMIC'" value="Param">Param</el-option>
              <el-option value="Placeholder">Placeholder</el-option>
              <el-option value="Auto">Auto</el-option>
              <el-option value="DateTime">DateTime</el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider style="margin-top: 0px;">{{ sectionType }}</el-divider>
      <template v-if="sectionType === 'Fixed'">
        <el-form-item
          label="固定值"
          prop="parameter"
          :rules="[
            { required: true,message: '固定值不能为空',
              trigger: 'blur'}
          ]" >
          <el-input
            v-model.trim="form.parameter"
            :maxlength="64"
            show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="区段描述" prop="description">
          <el-input type="textarea" v-model.trim="form.description" :maxlength="255" show-word-limit></el-input>
        </el-form-item>
      </template>
      <template v-if="sectionType === 'Param'">
        <el-form-item
          label="参数值"
          prop="parameter"
          :rules="[
            { required: true,message: '参数值不能为空',
              trigger: 'blur'}
          ]">
          <el-input v-model.trim="form.parameter" :maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item
          v-if="sectionType === 'Param'"
          prop="startLength"
          label="长度限制"
          :rules="[
            { required: true,message: '长度限制不能为空',
              trigger: 'blur'}
          ]">
          <el-input-number
            :min="1"
            :max="totalLength"
            :step="1"
            :precision="0"
            v-model="form.startLength"
            style="width: 215px"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="区段描述" prop="description">
          <el-input type="textarea" v-model.trim="form.description" :maxlength="255" show-word-limit></el-input>
        </el-form-item>
      </template>
      <template v-if="sectionType === 'Placeholder'">
        <el-form-item
          label="参数值"
          prop="parameter"
          :rules="[
            { required: true,message: '参数值不能为空',
              trigger: 'blur'}
          ]">
          <el-input v-model.trim="form.parameter" :maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item
          prop="startLength"
          label="长度限制"
          :rules="[
            { required: true,message: '长度限制不能为空',
              trigger: 'blur'}
          ]">
          <el-input-number
            :min="1"
            :max="totalLength"
            :step="1"
            :precision="0"
            style="width: 215px"
            v-model="form.startLength"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="区段描述" prop="description">
          <el-input type="textarea" v-model.trim="form.description" :maxlength="255" show-word-limit></el-input>
        </el-form-item>
      </template>
      <template v-if="sectionType === 'Auto'">
        <el-form-item
          label="定义进制"
          prop="radix"
          :rules="[
            { required: true,message: '定义进制不能为空',
              trigger: 'change'}
          ]" >
          <el-select v-model="form.radix">
            <el-option value="DECIMAL" label="十进制"> </el-option>
            <el-option value="HEXADECIMAL" label="十六进制"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="sectionType === 'Auto'"
          label="长度限制"
          prop="startLength"
          :rules="[
            { required: true,message: '长度限制不能为空',
              trigger: 'blur'}
          ]">
          <el-input-number
            :max="totalLength"
            :min="1"
            :step="1"
            :precision="0"
            style="width: 215px"
            v-model="form.startLength"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          label="起始序号"
          prop="startCode"
          :rules="[
            { required: true,message:'起始序号不能为空',trigger: 'blur'}
          ]">
          <el-input-number
            style="width: 215px"
            :min="0"
            :step="1"
            :precision="0"
            v-model="form.startCode"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          label="最大序号"
          prop="endCode"
          :rules="[
            { required: true,message: '最大序号不能为空',trigger: 'blur'},
            { validator: endCodeValidator, trigger: 'blur' }
          ]">
          <el-input-number
            :min="form.startCode + 1"
            style="width: 215px"
            :step="1"
            :precision="0"
            v-model="form.endCode"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          label="补充填位符"
          prop="supplyCode"
          :rules="[
            { required: true,message:'补充填位符不能为空',
              trigger: 'blur'}
          ]">
          <el-input v-model.trim="form.supplyCode"></el-input>
        </el-form-item>

        <!--        自动序列号重置 -->
        <!--        <el-form-item-->
        <!--          label="自动序列号重置"-->
        <!--          label-width="140px"-->
        <!--          prop="autoReset"-->
        <!--          :rules="[-->
        <!--            { required: true,message: '自动序列号重置不能为空', trigger: 'change'}-->
        <!--          ]">-->

        <!--          <el-radio-group v-model="form.autoReset">-->
        <!--            <el-radio :label="true">是</el-radio>-->
        <!--            <el-radio :label="false">否</el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->
        <el-form-item label="区段描述" prop="description">
          <el-input type="textarea" v-model.trim="form.description" :maxlength="255" show-word-limit></el-input>
        </el-form-item>
      </template>
      <template v-if="sectionType === 'DateTime'">
        <el-form-item
          label="时间格式"
          prop="dateType"
          :rules="[
            { required: true, message: '时间格式不能为空',trigger: 'blur'}
          ]">
          <el-select
            v-model="form.dateType"
            style="width: 100%"
            @change="changeDateType">
            <el-option value="YYYYMMDD" label="年月日"></el-option>
            <el-option value="YYYYMM" label="年月"></el-option>
            <el-option value="MMDDYYYY" label="月日年"></el-option>
            <el-option value="DDMMYYYY" label="日月年"></el-option>
            <el-option value="MMYYYY" label="月年"></el-option>
            <el-option value="YYYYWW" label="年周"></el-option>
            <el-option value="YYYYMMDDHH" label="年月日时"></el-option>
            <el-option value="YYYYMMDDHHMM" label="年月日时分"></el-option>
            <el-option value="YYYYMMDDHHMMSS" label="年月日时分秒"></el-option>
            <el-option value="CUSTOME" label="自定义"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.dateType === 'CUSTOME'"
          label="自定义格式"
          prop="datePattern"
          :rules="[
            { required: true, message: '自定义格式不能为空',trigger: 'blur'},
            {
              pattern: /^[yMdHmsw]{1,}$/,
              message: '请输入正确的自定义格式',
              trigger: 'change'
            }
          ]"
        >
          <template slot="label">自定义格式

            <el-tooltip placement="bottom" effect="light">
              <div slot="content">
                <p>日期和时间配置说明：</p>
                <p>y：年（yyyy-表示四位数字年份（如：2021），yy-表示四位数字年份后两位（如：2021中的21））</p>
                <p>M：年中的月份</p>
                <p>d：月份中的天数</p>
                <p>H：一天中的小时数（0-23）</p>
                <p>m：小时中的分钟数</p>
                <p>s：分钟中的秒数</p>
                <p>w：年中的周数</p>
              </div>
              <i class="el-icon-question"/>
            </el-tooltip>

          </template>

          <el-input v-model="form.datePattern"></el-input>
        </el-form-item>
        <el-form-item label="区段描述" prop="description">
          <el-input
            type="textarea"
            v-model="form.description"
            :maxlength="255"
            show-word-limit
          ></el-input>
        </el-form-item>
      </template>
    </el-form>
    <!--    添加区段form end-->
    <div slot="footer" class="tr">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'SectionModal',
  components: {

  },

  data () {
    return {
      section: null,
      modelFlag: 'add',
      ruleType: '',
      serialNumId: '',
      index: null,
      visible: false,
      sectionList: [],
      form: {
        serialNumId: '',
        sectionType: 'Fixed',
        name: '',
        radix: '', // 进制
        startLength: '',
        startCode: 0,
        endCode: '',
        supplyCode: '', // 补充填为符
        description: '',
        dateType: '', // 时间格式
        parameter: '', // Param 的参数名
        autoReset: null
      },
      sectionType: 'Fixed',
      totalLength: 999999
    }
  },
  computed: {
    sectionField () {
      if (this.sectionType === 'Fixed') {
        return ['sectionType', 'name', 'parameter', 'description']
      } else if (this.sectionType === 'Param') {
        return ['sectionType', 'name', 'parameter', 'description', 'startLength']
      } else if (this.sectionType === 'Placeholder') {
        return ['sectionType', 'name', 'parameter', 'description', 'startLength']
      } else if (this.sectionType === 'DateTime') {
        return ['sectionType', 'name', 'dateType', 'description', 'datePattern']
      }
      return [
        'name',
        'sectionType',
        'radix',
        'startLength',
        'startCode',
        'endCode',
        'supplyCode',
        'autoReset',
        'description'
      ]
    }
  },
  methods: {
    add (sectionList, serialNumId, totalLength, ruleType) {
      this.ruleType = ruleType
      this.serialNumId = serialNumId
      this.visible = true
      this.index = null
      this.section = null
      this.sectionList = sectionList
      this.sectionType = 'Fixed'
      this.form.sectionType = 'Fixed'
      this.totalLength = totalLength || 999999
    },
    edit (section, index, sectionList, totalLength, ruleType) {
      this.ruleType = ruleType
      this.serialNumId = section.serialNumId
      this.section = section
      this.index = index
      this.visible = true
      this.sectionList = sectionList
      this.totalLength = totalLength || 999999
      const {
        id,
        sectionType,
        name,
        radix,
        startLength,
        startCode,
        endCode,
        supplyCode,
        // prefixGroup,
        description,
        autoReset,
        dateType,
        datePattern,
        parameter
      } = section
      this.sectionType = sectionType
      this.$nextTick(() => {
        if (sectionType === 'Auto') {
          this.form = {
            name,
            sectionType,
            radix,
            startLength,
            startCode,
            endCode,
            supplyCode,
            // autoReset,
            description
          }
        } else if (sectionType === 'DateTime') {
          this.form = {
            sectionType,
            name,
            dateType,
            datePattern,
            description
          }
        } else if (sectionType === 'Param') {
          this.form = {
            sectionType,
            name,
            parameter,
            description,
            startLength
          }
        } else if (sectionType === 'Placeholder') {
          this.form = {
            sectionType,
            name,
            parameter,
            description,
            startLength
          }
        } else {
          this.form = {
            sectionType,
            name,
            parameter,
            description
          }
        }
        this.form.id = id
        this.form.serialNumId = this.serialNumId
      })
    },
    handleChangeType (type) {
      this.sectionType = type
      const { name } = this.form
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
        this.form = {
          sectionType: this.sectionType,
          name,
          radix: 'DECIMAL', // 进制
          startLength: '',
          startCode: 0,
          endCode: '',
          supplyCode: '', // 补充填为符
          description: '',
          dateType: '', // 时间格式
          datePattern: '', // 自定义日期格式
          parameter: '', // Param 的参数名
          autoReset: null
        }
        if (type === 'Auto') {
          this.$refs.form.validateField('sectionType')
        }
      })
    },
    validateName (rule, value, callback) {
      const arr = this.sectionList.find((d, i) => d.name === value && i !== this.index)
      if (arr) {
        return callback(new Error('区段名称不能重复'))
      }
      callback()
    },
    validateSectionType (rule, value, callback) {
      if (['Fixed', 'Param', 'Placeholder'].includes(value)) {
        return callback()
      }
      const arr = this.sectionList.find((d, i) => d.sectionType === value && i !== this.index)
      if (arr) {
        return callback(new Error('已有此类型区段 无法重复添加'))
      }
      callback()
    },
    async submit () {
      try {
        await this.$refs.form.validate()
        const req = {
        }
        for (const key of this.sectionField) {
          req[key] = typeof this.form[key] === 'string' ? this.form[key].trim() : this.form[key]
        }
        req.serialNumId = this.serialNumId
        if (this.section) {
          req.id = this.section.id
        }
        this.$emit('ok', {
          section: req, index: this.index
        })
        this.handleCancel()
      } catch (error) {
        console.log(error)
      }
    },
    handleCancel () {
      this.visible = false
      this.section = null
      this.index = null
      this.$refs.form.resetFields()
      this.form = {}
    },
    endCodeValidator (rule, value, callback) {
      if (value < Number(this.form.startCode) + 1) {
        callback(new Error('最大序号要大于起始序号'))
      } else {
        callback()
      }
    },
    changeDateType () {
      this.$set(this.form, 'datePattern', '')
    }
  }
}
</script>

<style scoped>
</style>
